<template>
<section class="album">
  <div class="album-inner">
    <el-row :gutter="15">
      <el-col :span="6" v-for="(item,index) in guessYourLikeList" :key="index">
        <el-card :body-style="{ padding: '0px' }" shadow="hover">
          <el-image :src="item.img_thumbnail|fillImgShot" style="height:240px;" fit="cover" @click="linkToDetail(item.id)"></el-image>
          <!-- <div class="card-content">
            <p class="title">{{item.title}}</p>
            <p class="text-info hidden-md-and-down">{{item.count}}张</p>
          </div> -->
        </el-card>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24" class="text-center">
        <el-button icon="el-icon-refresh-right" type="primary" plain class="btn-more" @click="changeBatch()" round>换一批</el-button>
      </el-col>
    </el-row>
  </div>
</section>
</template>

<script>
export default {
  name: 'yourLike', //猜你喜欢
  data() {
    return {
      guessParmas: {
        //猜你喜欢参数
        page: 1,
        pageSize: 12,
        userId: ""
      },
      guessYourLikeList:[],
      gallery: [],
    }
  },
  mounted(){
    if (window.sessionStorage.getItem("tuyibo_userid") !== null) {
      var data = JSON.parse(window.sessionStorage.getItem("tuyibo_userid"));
      // this.$store.commit("user/SET_isLogin", true);
      this.guessParmas.userId = data.userid;
      this.getYourImage(this.guessParmas); //获取猜你喜欢图片
    }
  },
  methods:{
    // 猜你喜欢换一批
    findOthers() {
      this.guessParmas.page++;
      this.getYourImage(this.guessParmas);
    },
    getYourImage(pars) {
      this.$axios.post("/api/web/guessYourLike", pars).then(res => {
        this.guessYourLikeList = res.data.rows;
      });
    },
    linkToDetail(id){
      this.$router.push(`/detail?id=${id}`);
    },
    changeBatch(){
      this.findOthers();
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
.album {
    margin-bottom: 24px;
    ::v-deep.el-card {
        position: relative;
        margin-bottom: 15px;
        .el-image {
            display: block;
            width: 100%;
        }
        .card-content {
            cursor: pointer;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);
            background-color: rgba(0,0,0,.75);
            color: @white;
            font-size: 20px;
            font-weight: 600;
            border-radius: 6px;
            padding: 12px 16px;
            transition: all 0.2s;
            transform-origin: center center;
            .title {
                border-bottom: 4px solid @white;
                padding-bottom: 6px;
                word-break: break-all;
            }
            .text-info {
                font-size: 14px;
                font-weight: lighter;
                padding-top: 5px;
            }
        }
        &:hover {
            .card-content {
                opacity: 0;
                transform: translate(-50%,-50%) scale(2);
            }
        }
    }
}
</style>
